<template>
	<view>
		<form @submit="formSubmit">
			<view class="add">
				<view class="addList">
					<view class="Phone"><text>姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名*</text></view>
					<view class="input"><input name="familyName" v-model="familyAdd.familyName" type="text" value="" />
					</view>
				</view>
				<hr />
				<!-- 	<view class="addList">
				<view class="Phone"><text>出生日期*</text></view>
				<uni-datetime-picker name="birthday" type="date" :clearIcon="false" v-model="familyAdd.birthday" :border="false"
					@maskClick="maskClick" />
			</view> -->

				<view class="addList">

					<view class="Phone">
						出生日期*
					</view>
					<view class="uni-list-cell-dbs">
						<picker name="birthday" mode="date" @change="bindDateChange">
							<view class="uni-input">{{familyAdd.birthday}}</view>
						</picker>
					</view>
				</view>

				<hr />
				<view class="addList">
					<view class="Phone"><text>性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别*</text></view>
					<view class="uni-form-item uni-column">
						<radio-group name="gender" class="xuang" @change="radioChange">
							<label v-for="(item,index) in radioItems" :key="index">
								<radio :id="item.name" :value="item.name"></radio>
								<label class="label-2-text" :for="item.name">
									<text>{{item.value}}</text>
								</label>
							</label>
						</radio-group>
					</view>
				</view>
				<!-- <view class="input"><input v-model="familyAdd.gender" type="text" value="" /></view> -->

				<hr />
				<view class="addList">
					<view class="Phone"><text>手&nbsp&nbsp机&nbsp&nbsp号*</text></view>
					<view class="input"><input name="phone" v-model="familyAdd.phone" type="number" value="" /></view>
				</view>
				<hr />
				<view class="addList">
					<view class="Phone"><text>身&nbsp&nbsp份&nbsp&nbsp证*</text></view>
					<view style="width: 80%;" class="input"><input name="idCard" v-model="familyAdd.idCard" type="text"
							value="" /></view>
				</view>
				<hr />
				<view class="addList">
					<view class="Phone"><text>关&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp系*</text></view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker name="relationship" @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input">{{array[index]}}</view>
								</picker>
							</view>
						</view>
					</view>
					<!-- <view class="input"><input v-model="familyAdd.relationship" type="text" value="" /></view> -->
				</view>
				<hr />
				<view class="addList">
					<view class="Phone">密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码*</view>
					<view class="input"><input @input="changeDisabled" type="text" :password="show" name="password"
							v-model="familyAdd.password" value="" /></view>
					<view class="yanjing">
						<sunui-password v-show="showPassword" @change="showPass" />
					</view>
				</view>
				<hr />
				<view class="addList">
					<view class="Phone">确认密码*</view>
					<view class="input"><input @input="changeDisableds" type="text" :password="shows" name="newpassword"
							v-model="newpassword" value="" /></view>
					<view class="yanjing">
						<sunui-password v-show="showPasswords" @change="showPas" />
					</view>
				</view>
				<hr />

				<!-- 备注 -->
				<view class="addLists">
					<view class="Phone"><text>备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注</text></view>
					<!-- 				<view class="texta">备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注<textarea type="text"
						v-model="familyAdd.remark"></textarea></view> -->
					<view><textarea v-model="familyAdd.remark" auto-height /></view>

				</view>

				<button form-type="submit" class="sub_button">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import graceChecker from "../../../common/graceChecker.js"

	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				showPassword: false,
				showPasswords: false,
				show: true,
				shows: true,
				date: getDate({
					format: true
				}),
				newpassword: '',
				familyAdd: {
					birthday: '请选择',
					familyName: '',
					gender: '',
					phone: '',
					relationship: '',
					idCard: '',
					memberId: '',
					remark: '',
					password: '',
					memberName: uni.getStorageSync('memberName'),
					uniqueNo: uni.getStorageSync('uniqueCode'),
				},
				array: ['请选择', '本人', '父母', '兄弟', '朋友', '子女', '其他', '配偶'],
				index: 0,
				radioItems: [{
						name: '0',
						value: '男'
					},
					{
						name: '1',
						value: '女',
					}
				],
				upperLimit: '',
				familieslength: '',
			}
		},
		onShow() {
			this.family();
		},
		onLoad: function(option) {
			this.upperLimit = option.upperLimit;
			this.familieslength = option.familieslength;
		},
		methods: {
			showPass(e) {
				this.show = e;
			},
			showPas(e) {
				this.shows = e;
			},
			bindDateChange: function(e) {
				this.familyAdd.birthday = e.detail.value
			},
			changeDisabled(e) {
				// console.log(e.detail.value)
				if (e.detail.value != "") {
					this.showPassword = true;
				} else {
					this.showPassword = false;
				}
			},
			changeDisableds(e) {
				if (e.detail.value != "") {
					this.showPasswords = true;
				} else {
					this.showPasswords = false;
				}
			},
			async formSubmit(e) {
				// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var rule = [{
						name: "familyName",
						checkType: "string",
						checkRule: "1,6",
						errorMsg: "姓名不符合"
					},
					{
						name: "birthday",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入出生日期"
					},
					{
						name: "gender",
						checkType: "in",
						checkRule: "0,1",
						errorMsg: "请选择性别"
					},
					{
						name: "phone",
						checkType: "string",
						checkRule: "11",
						errorMsg: "请输入正确的手机号码"
					},
					{
						name: "idCard",
						checkType: "string",
						checkRule: "15,18",
						errorMsg: "请输入正确的身份证"
					},
					{
						name: "relationship",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请选择与家属的关系"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,12",
						errorMsg: "请输入6~12位密码"
					},
					{
						name: "newpassword",
						checkType: "notnull",
						checkRule: "6,12",
						errorMsg: "请输入6~12位确认密码"
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				// console.log(formData)
				var checkRes = graceChecker.check(formData, rule);
				console.log(this.familyAdd)
				if (checkRes) {
					if (this.familyAdd.password == this.newpassword) {
						if (this.familieslength != this.upperLimit) {
							const ret = await this
								.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
									url: '/api-operate/families/save',
									method: "POST",
									data: this.familyAdd
								});
							// console.log(ret)
							if (ret.success == true) {
								uni.showToast({
									title: '添加成功',
									icon: "none"
								});
								uni.navigateBack({ //关闭当前页面，跳转到应用内的某个页面。
									url: '/pages/familyManagement/index'
								})
							} else {
								uni.showToast({
									title: ret.msg,
									icon: "none"
								});
							}
						} else {
							uni.showToast({
								title: "家属的上限已经到达，如果需要增加，请联系生活管家",
								icon: "none"
							});
						}
					} else {
						uni.showToast({
							title: "两次密码不一致",
							icon: "none"
						});
					}

				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			family() {
				const id = uni.getStorageSync('id');
				// console.log(id)
				this.familyAdd.memberId = id
				// console.log(this.radioItems)
			},
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.familyAdd.relationship = this.index
			},
			radioChange: function(e) {
				var checked = e.target.value
				var changed = {}
				for (var i = 0; i < this.radioItems.length; i++) {
					if (this.radioItems[i].checked == true) {
						changed['radioItems[' + i + '].checked'] = true
					} else {
						changed['radioItems[' + i + '].checked'] = false
					}
				}

				this.familyAdd.gender = checked
			},

		}

	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';

	.add {
		margin-top: 20rpx;

		hr {
			border: none;
			height: 3px;
			background-color: #f3f3f3;
		}
	}

	.addList {
		// margin-top: 20rpx;
		height: 100rpx;
		background-color: #FFFFFF;

		display: flex;
		color: #565656;
		font-size: 20rpx;
		font-weight: 600;
		flex-direction: row;
		align-items: center;
	}

	.addLists {
		// margin-top: 20rpx;
		// height: 400rpx;
		background-color: #FFFFFF;
		width: 100%;
		// display: flex;
		color: #565656;
		font-size: 20rpx;
		font-weight: 600;
		flex-direction: row;

		// align-items: center;
		textarea {
			// margin-left: 60rpx;
			background-color: #FFFFFF;
			// width: 200rpx;
			margin-left: 80rpx;
			font-size: 70rpx;
			color: #565656;

		}
	}


	.Phone {
		// background-color: #007AFF;
		width: 200rpx;
		margin-left: 40rpx;
		font-size: 35rpx;
	}

	.input {
		font-size: 30rpx;
		color: #949494;
	}

	.xuang {
		display: flex;

		label {
			margin-right: 40rpx;
		}
	}



	.uni-list {
		// background-color: #007AFF;
		width: 70%;
	}

	.uni-input {
		font-size: 30rpx;
		color: #959595;
	}

	.uni-list-cell-dbs {
		width: 70%;

	}

	.yanjing {
		line-height: 100rpx;
		position: absolute;
		right: 6%;
	}
</style>
